<template>
  <footer class="app-footer">
    <!-- 背景装饰 -->
    <div class="footer-bg">
      <div class="footer-stars"></div>
      <div class="footer-mist"></div>
    </div>

    <div class="footer-content">
      <!-- 主要内容区 -->
      <div class="footer-main">
        <!-- 致敬文字 -->
        <div class="footer-tribute">
          <div class="tribute-icon">🕯️</div>
          <div class="tribute-text">
            <h3 class="tribute-title">致敬逝去的数字时代</h3>
            <p class="tribute-desc">
              每一个消失的网站都承载着无数人的回忆与情感，<br>
              它们曾经是我们数字生活的一部分，值得被永远铭记。
            </p>
          </div>
        </div>
      </div>

      <!-- 分隔线 -->
      <div class="footer-divider"></div>

      <!-- 底部信息 -->
      <div class="footer-bottom">
        <div class="footer-copyright">
          <div class="copyright-text">
            <span class="copyright-symbol">©</span>
            <span class="copyright-year">{{ currentYear }}</span>
            <span class="copyright-name">数字墓园</span>
            <span class="copyright-desc">- 记录消逝的数字文明</span>
          </div>
          <div class="copyright-license">
            本项目采用 
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener">
              CC BY-NC-SA 4.0
            </a> 
            协议开源
          </div>
        </div>

        <div class="footer-social">
          <button 
            v-for="social in socialLinks"
            :key="social.name"
            class="social-btn"
            @click="openSocialLink(social)"
            :title="social.name"
          >
            <span class="social-icon">{{ social.icon }}</span>
          </button>
        </div>

        <div class="footer-tech">
          <div class="tech-info">
            <span class="tech-label">技术栈:</span>
            <div class="tech-stack">
              <span class="tech-item">Vue 3</span>
              <span class="tech-item">Pinia</span>
              <span class="tech-item">Vite</span>
            </div>
          </div>
          <div class="build-info">
            <span class="build-time">构建时间: {{ buildTime }}</span>
            <span class="version">v{{ version }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 浮动蜡烛 -->
    <div class="floating-candles">
      <div 
        v-for="i in 5" 
        :key="i"
        class="floating-candle"
        :style="{ 
          '--delay': `${i * 0.5}s`,
          '--duration': `${3 + i * 0.5}s`
        }"
      >
        🕯️
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const currentYear = ref(new Date().getFullYear())
const buildTime = ref('2024-01-01 12:00:00')
const version = ref('1.0.0')

// 社交链接
const socialLinks = [
  { name: 'GitHub', icon: '🐙', url: 'https://github.com' },
  { name: '微博', icon: '📱', url: 'https://weibo.com' },
  { name: 'Twitter', icon: '🐦', url: 'https://twitter.com' },
  { name: 'QQ群', icon: '💬', url: '#' },
  { name: 'RSS', icon: '📡', url: '/rss.xml' }
]

const openSocialLink = (social) => {
  if (social.url.startsWith('http')) {
    window.open(social.url, '_blank', 'noopener,noreferrer')
  } else {
    console.log(`打开 ${social.name}`)
  }
}

// 生命周期
onMounted(() => {
  // 获取构建信息
  buildTime.value = new Date().toLocaleString('zh-CN')
})
</script>

<style scoped>
.app-footer {
  position: relative;
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.8) 0%, 
    rgba(0, 0, 0, 0.95) 100%);
  border-top: 1px solid var(--border-color);
  margin-top: 4rem;
  overflow: hidden;
}

/* 背景装饰 */
.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.footer-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: twinkle 4s infinite;
  opacity: 0.6;
}

.footer-mist {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(0deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 100%);
  animation: mist-flow 8s infinite ease-in-out;
}

/* 内容区域 */
.footer-content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
  z-index: 1;
}

.footer-main {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

/* 致敬文字 */
.footer-tribute {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 600px;
}

.tribute-icon {
  font-size: 2rem;
  animation: flicker 2s infinite;
}

.tribute-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.tribute-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

/* 分隔线 */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--border-color), 
    transparent);
  margin: 2rem 0;
}

/* 底部信息 */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.footer-copyright {
  text-align: left;
}

.copyright-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.copyright-symbol {
  font-weight: bold;
}

.copyright-name {
  font-weight: 600;
  color: var(--text-primary);
}

.copyright-license {
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.8;
}

.copyright-license a {
  color: var(--accent-color);
  text-decoration: none;
}

.copyright-license a:hover {
  text-decoration: underline;
}

/* 社交链接 */
.footer-social {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.social-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.social-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
  transform: translateY(-2px);
}

/* 技术信息 */
.footer-tech {
  text-align: right;
}

.tech-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.tech-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.tech-stack {
  display: flex;
  gap: 0.25rem;
}

.tech-item {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.build-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.8;
}

.version {
  font-weight: 600;
  color: var(--accent-color);
}

/* 浮动蜡烛 */
.floating-candles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-candle {
  position: absolute;
  font-size: 1.5rem;
  animation: float var(--duration, 4s) infinite ease-in-out;
  animation-delay: var(--delay, 0s);
  opacity: 0.6;
}

.floating-candle:nth-child(1) { left: 10%; top: 20%; }
.floating-candle:nth-child(2) { left: 25%; top: 60%; }
.floating-candle:nth-child(3) { left: 50%; top: 30%; }
.floating-candle:nth-child(4) { left: 75%; top: 70%; }
.floating-candle:nth-child(5) { left: 90%; top: 40%; }

/* 动画 */
@keyframes twinkle {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes mist-flow {
  0%, 100% { transform: translateX(-10px); opacity: 0.3; }
  50% { transform: translateX(10px); opacity: 0.6; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(5deg); }
  66% { transform: translateY(-5px) rotate(-3deg); }
}

/* 响应式设计 - 增强版 */

/* 超大屏幕 (1440px+) */
@media (min-width: 1440px) {
  .footer-content {
    max-width: 1400px;
    padding: 4rem 3rem 3rem;
  }
  
  .tribute-title {
    font-size: 1.5rem;
  }
  
  .tribute-desc {
    font-size: 1rem;
  }
}

/* 大屏幕 (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .footer-content {
    max-width: 1140px;
    padding: 3.5rem 2.5rem 2.5rem;
  }
}

/* 中大屏幕 (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .footer-content {
    padding: 3rem 2rem 2rem;
  }
}

/* 平板横屏 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-content {
    padding: 2.5rem 1.5rem 2rem;
  }
  
  .footer-main {
    text-align: center;
  }
  
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  
  .footer-tech {
    text-align: center;
  }
  
  .tech-info {
    justify-content: center;
  }
  
  .build-info {
    align-items: center;
  }
  
  .floating-candle {
    font-size: 1.3rem;
  }
}

/* 平板竖屏 (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
  .footer-content {
    padding: 2rem 1.5rem 1.5rem;
  }
  
  .footer-main {
    text-align: center;
  }
  
  .footer-tribute {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .tribute-title {
    font-size: 1.2rem;
  }
  
  .tribute-desc {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .tribute-desc br {
    display: none;
  }
  
  .footer-social {
    gap: 0.8rem;
  }
  
  .social-btn {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}

/* 大手机横屏 (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
  .footer-content {
    padding: 1.8rem 1rem 1.2rem;
  }
  
  .footer-main {
    text-align: center;
  }
  
  .footer-tribute {
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }
  
  .tribute-icon {
    font-size: 1.8rem;
  }
  
  .tribute-title {
    font-size: 1.1rem;
  }
  
  .tribute-desc {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  .tribute-desc br {
    display: none;
  }
  
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    text-align: center;
  }
  
  .copyright-text {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.8rem;
  }
  
  .copyright-license {
    font-size: 0.75rem;
  }
  
  .footer-social {
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .social-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  
  .tech-info {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }
  
  .tech-stack {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .tech-item {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
  
  .build-info {
    align-items: center;
    font-size: 0.75rem;
  }
  
  .floating-candle {
    font-size: 1.1rem;
  }
}

/* 小手机 (320px - 479px) */
@media (max-width: 479px) {
  .footer-content {
    padding: 1.5rem 0.8rem 1rem;
  }
  
  .footer-main {
    text-align: center;
  }
  
  .footer-tribute {
    flex-direction: column;
    text-align: center;
    gap: 0.6rem;
  }
  
  .tribute-icon {
    font-size: 1.6rem;
  }
  
  .tribute-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .tribute-desc {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  
  .tribute-desc br {
    display: none;
  }
  
  .footer-divider {
    margin: 1.5rem 0;
  }
  
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  
  .copyright-text {
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
  }
  
  .copyright-license {
    font-size: 0.7rem;
    margin-top: 0.3rem;
  }
  
  .footer-social {
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .social-btn {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
  
  .tech-info {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  
  .tech-label {
    font-size: 0.7rem;
  }
  
  .tech-stack {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  
  .tech-item {
    font-size: 0.6rem;
    padding: 0.1rem 0.25rem;
  }
  
  .build-info {
    align-items: center;
    font-size: 0.7rem;
    gap: 0.1rem;
  }
  
  .floating-candle {
    font-size: 1rem;
  }
  
  /* 隐藏部分装饰元素以提升性能 */
  .floating-candles {
    display: none;
  }
  
  .footer-stars {
    opacity: 0.3;
  }
}

/* 超小屏幕 (280px - 319px) */
@media (max-width: 319px) {
  .footer-content {
    padding: 1rem 0.5rem 0.8rem;
  }
  
  .tribute-title {
    font-size: 0.9rem;
  }
  
  .tribute-desc {
    font-size: 0.75rem;
  }
  
  .stat-number {
    font-size: 1.1rem;
  }
  
  .link-title {
    font-size: 0.8rem;
  }
  
  .link-list a {
    font-size: 0.7rem;
  }
  
  .social-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  
  .copyright-text {
    font-size: 0.7rem;
  }
  
  .copyright-license {
    font-size: 0.65rem;
  }
}

/* 横屏适配 */
@media (orientation: landscape) and (max-height: 500px) {
  .footer-content {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }
  
  .footer-main {
    gap: 1rem;
  }
  
  .tribute-icon {
    font-size: 1.5rem;
  }
  
  .floating-candles {
    display: none;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .footer-stars {
    background-size: 100px 50px;
  }
  
  .social-btn {
    border-width: 0.5px;
  }
  
  .stat-item {
    border-width: 0.5px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .social-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  .link-list a {
    padding: 0.5rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .link-list a:hover {
    transform: none;
  }
  
  .social-btn:hover {
    transform: none;
  }
  
  .stat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
  }
}

/* 减少动画的用户偏好 */
@media (prefers-reduced-motion: reduce) {
  .floating-candles,
  .footer-stars,
  .footer-mist {
    animation: none;
  }
  
  .tribute-icon {
    animation: none;
  }
  
  .social-btn,
  .stat-item,
  .link-list a {
    transition: none;
  }
}

/* 打印样式 */
@media print {
  .app-footer {
    background: white !important;
    color: black !important;
    border-top: 1px solid #ccc;
  }
  
  .footer-bg,
  .floating-candles {
    display: none;
  }
  
  .footer-social,
  .link-list a[href^="#"] {
    display: none;
  }
  
  .link-list a {
    color: black !important;
    text-decoration: underline;
  }
  
  .tribute-icon {
    display: none;
  }
}
</style>